<template>
  <el-main>
    <div class="scale">
      <el-button @click="scale += 10" :disabled="scale >= 150" circle>
        <el-icon>
          <Plus />
        </el-icon>
      </el-button>
      <span>{{ scale }}%</span>
      <el-button @click="scale -= 10" :disabled="scale <= 40" circle>
        <el-icon><Minus /></el-icon>
      </el-button>
      <el-button size="large" @click="validate">校验流程</el-button>
      <el-button size="large" @click="submit" :loading="submitLoading">提交流程</el-button>
    </div>
    <div class="design" :style="'transform: scale(' + scale / 100 + ');'">
      <ProcessTree ref="processTree" @selectedNode="nodeSelected" />
    </div>
    <el-drawer
      v-model="showConfig"
      :title="NODE_MODEL.selectedNode.name"
      :size="NODE_MODEL.selectedNode.type === 'CONDITION' ? '600px' : '500px'"
      direction="rtl"
      :modal="false"
      destroy-on-close
      :show-close="false"
    >
      <template #header="{ close, titleId, titleClass }">
        <div style="width: 96%; display: inline-block">
          <el-input v-model="NODE_MODEL.selectedNode.name" v-show="showInput" style="width: 300px" @blur="changeShowInput(false)"></el-input>
          <el-link v-show="!showInput" @click="changeShowInput(true)" style="font-size: medium">
            <el-icon style="margin-right: 10px"><EditPen /></el-icon>
            {{ NODE_MODEL.selectedNode.name }}
          </el-link>
        </div>
        <el-icon @click="close" style="cursor: pointer">
          <Close />
        </el-icon>
      </template>
      <div class="node-config-content">
        <NodeConfig />
      </div>
    </el-drawer>
  </el-main>
</template>

<script setup name="ProcessDesign" lang="ts">
import {ref} from "vue";
import {NODE_MODEL} from "@/components/Process/DefaultNodeProps";
import {Close, EditPen, Minus, Plus} from "@element-plus/icons-vue";
import {postDesign} from "@/api/bpm/model";
import {s} from "vitest/dist/env-afee91f0";

const scale = ref(100)

const selected = ref({})

const showInput = ref(false)

const showConfig = ref(false)

const submitLoading =ref(false)

const selectedNode = NODE_MODEL.selectedNode

const processTree = ref()

const validate = () => {
  console.log("校验流程");
  processTree.value.validateProcess();
};

const changeShowInput = (val:boolean) => {
  showInput.value = val;
};

const nodeSelected = (node:any)=>{
  console.log("配置节点： node ", node);
  console.log("配置节点： NODE_MODEL ", NODE_MODEL);
  showConfig.value = true
}
const submit = () =>{
  submitLoading.value=true
  postDesign(NODE_MODEL).finally(() => submitLoading.value = false);
}
</script>

<style lang="scss" scoped>
.design {
  padding-top: 20px;
  display: flex;
  transform-origin: 50% 0px 0px;
  background: #f5f6f6;
}

.scale {
  z-index: 999;
  position: absolute;
  top: 80px;
  right: 40px;

  span {
    margin: 0 10px;
    font-size: 15px;
    color: #7a7a7a;
    width: 50px;
  }
}

.node-config-content {
  padding: 0 20px 20px;
}

:deep(.el-drawer__body) {
  overflow-y: auto;
  padding: 0;
}
</style>
